'use client'

import { 
  List, 
  ListItem, 
  Icon, 
  useColorModeValue 
} from '@chakra-ui/react'
import { FiUser } from 'react-icons/fi'
import { DraggableItem } from './DraggableItem'

export interface Character {
  id: string;
  name: string;
  projectId: string;
}

interface CharacterListProps {
  characters: Character[];
  activeCharacterId?: string;
  onSelectCharacter: (characterId: string) => void;
}

export const CharacterList = ({ 
  characters, 
  activeCharacterId,
  onSelectCharacter 
}: CharacterListProps) => {
  const activeColor = useColorModeValue('red.50', 'red.900')
  const activeBorderColor = useColorModeValue('red.400', 'red.500')
  const hoverBgColor = useColorModeValue('gray.100', 'gray.700')
  
  return (
    <List spacing={1} px={3}>
      {characters.map((character) => {
        const isActive = character.id === activeCharacterId
        
        return (
          <DraggableItem
            key={character.id}
            id={character.id}
            type="character"
            data={character}
          >
            <ListItem 
              p={2} 
              borderRadius="md" 
              bg={isActive ? activeColor : undefined}
              borderLeft={isActive ? "4px" : undefined}
              borderColor={isActive ? activeBorderColor : undefined}
              fontWeight={isActive ? "semibold" : "normal"}
              _hover={{ bg: !isActive ? hoverBgColor : undefined }}
              cursor="pointer"
              onClick={() => onSelectCharacter(character.id)}
              display="flex"
              alignItems="center"
            >
              <Icon as={FiUser} mr={2} color={isActive ? 'red.500' : 'gray.500'} />
              {character.name}
            </ListItem>
          </DraggableItem>
        )
      })}
    </List>
  )
} 